<template>
  <div style="margin-top: 10px">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Dictionaries Create</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="createNew"
        class="demo-form-inline"
        ref="createNew"
      >
        <el-row>
          <el-form-item label="Category:" prop="category">
            <el-select
              style="width: 220px"
              v-model="createNew.categoryId"
              allow-create
              filterable
              placeholder="please select category"
            >
              <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.category"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Detail Title:" prop="dictionary">
            <el-input
              style="width: 240px"
              v-model="createNew.dictionary"
              placeholder="please input dictionaryData"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Code:" prop="code">
            <el-input
              style="width: 240px"
              v-model="createNew.code"
              placeholder="please input code"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Description:" prop="description">
            <el-input
              style="width: 240px"
              v-model="createNew.description"
              placeholder="please input description"
            >
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-right: 10px"
          >
            <el-button type="primary" size="mini" @click="addForm(createNew)"
              >ADD</el-button
            >
            <el-button type="info" size="mini" @click="resetForm('createNew')"
              >RESET</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Dictionaries Management</span>
        </div>
      </template>
      <el-card>
        <el-row>
          <el-col :span="4" class="tableManagement">
            <div>
              <div style="font-size: 18px; font-weight: 650">Category</div>
              <el-divider></el-divider>
              <el-menu
                default-active="1"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <div v-for="item in categories">
                  <el-menu-item :index="item.id + ''">
                    <span slot="title" style="font-size: 17px">
                      {{ item.category }}
                    </span>
                  </el-menu-item>
                </div>
              </el-menu>
            </div>
          </el-col>
          <el-col :span="20" class="tableManagement">
            <div>
              <div style="font-size: 18px; font-weight: 650">
                Detail&nbsp;&nbsp;&nbsp;&nbsp;Description
              </div>
              <el-divider></el-divider>
              <div>
                <el-table
                  :data="dictionaries"
                  stripe
                  style="width: 100%"
                  border
                >
                  <el-table-column label="Number" align="center" width="90">
                    <template slot-scope="scope">
                      {{
                        scope.$index +
                        1 +
                        (pagination.currentPage - 1) * pagination.pageSize
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="dictionary" label="Detail Title">
                  </el-table-column>
                  <el-table-column prop="code" label="Code" width="230">
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    label="Description"
                    width="220"
                  >
                  </el-table-column>
                  <el-table-column prop="createTime" label="Create Time">
                  </el-table-column>
                  <el-table-column prop="updateTime" label="Update Time">
                  </el-table-column>
                  <el-table-column label="Operations" width="230">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="success"
                        icon="el-icon-edit"
                        v-if="scope.row.categoryId != 1"
                        @click="handleUpdate(scope.$index, scope.row)"
                        >Update</el-button
                      >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <br />
                <el-pagination
                  :currentPage="pagination.currentPage"
                  :page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 30, 40]"
                  layout="total, sizes, prev, pager, next"
                  :total="pagination.totalPages"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <el-dialog
      title="Update Data Dictionaries"
      :visible.sync="dialogVisible"
      class="dialogStyle"
      width="600px"
    >
      <div>
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="Detail Title:">
            <el-input v-model="form.dictionary"></el-input>
          </el-form-item>
          <el-form-item label="Code:">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item label="Decription:">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDialog()">confirm</el-button>
        <el-button @click="dialogVisible = false">cancel</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dict from "@/api/dict";
export default {
  data() {
    return {
      createNew: {
        categoryId: 1,
        category: "", //添加种类用的
        dictionary: "",
        code: "",
        description: "",
      },
      categories: [],
      form: {},
      dictionaries: [],
      moduleId: 1,
      deleteCategoryId: 0,
      dialogVisible: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalPages: 0,
      },
    };
  },
  mounted() {
    this.selection = this.tableData0;
    this.getCategoryList();
    this.handleSelect(1);
  },
  methods: {
    //根据目录查看字典数据信息
    handleSelect(key) {
      if (this.moduleId != key) {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
      }
      this.moduleId = key;
      dict
        .getDictionary(
          key,
          this.pagination.currentPage,
          this.pagination.pageSize
        )
        .then((res) => {
          this.dictionaries = res.body.records;
          this.pagination.totalPages = res.body.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getCategoryList() {
      dict
        .getCategories()
        .then((res) => {
          this.categories = res.body;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize;
      this.handleSelect(this.moduleId);
    },
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.handleSelect(this.moduleId);
    },
    handleUpdate(index, row) {
      this.form = row;
      this.dialogVisible = true;
    },
    //字典数据，或者删除某个种类
    handleDelete(index, row) {
      let message = "";
      if (row.categoryId == 1) {
        message = "此操作将永久该种类以及其下字典数据, 是否继续?";
      } else {
        message = "此操作将永久该字典数据, 是否继续?";
      }
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除字典数据
          if (row.categoryId == 1) {
            //删除整个总类
            this.findCategoryId(row.code);
            dict
              .deleteCategory(this.deleteCategoryId)
              .then((res) => {
                if (res.code == "200") {
                  this.getCategoryList();
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
          dict
            .deleteDictionary(row.id)
            .then((res) => {
              if (res.code == "200") {
                this.handleSelect(this.moduleId);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //确认修改
    updateDialog() {
      Reflect.deleteProperty(this.form, "updateTime");
      dict
        .updateDictionary(this.form)
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.handleSelect(this.moduleId);
            this.dialogVisible = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //增加字典数据
    addForm(formName) {
      //需要增加字典数据需要增加总类
      if (formName.categoryId == 1) {
        this.createNew.category = formName.dictionary;
        dict
          .creatNewCategory(this.createNew)
          .then((res) => {
            if (res.code == "301") {
              this.$message({
                type: "warning",
                message: "Duplicate Category data!",
              });
            }
            if (res.code == "302") {
              this.$message({
                type: "warning",
                message: "Duplicate Category code!",
              });
            }
            if (res.code == "200") {
              this.getCategoryList();
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      //增加字典数据
      dict
        .creatNewDictionary(this.createNew)
        .then((res) => {
          if (formName.categoryId != 1) {
            if (res.code == "303") {
              this.$message({
                type: "warning",
                message: "Duplicate dictionary data!",
              });
            }
            if (res.code == "302") {
              this.$message({
                type: "warning",
                message: "Duplicate dictionary code!",
              });
            }
          }
          if (res.code == "200") {
            this.handleSelect(formName.categoryId);
            this.$notify({
              title: "Created successfully",
              message: "Successfully inserted a dictionary",
              type: "success",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //前端查找方法，总类中的删除找到id
    findCategoryId(code) {
      console.log(code);
      for (let i = 0; i < this.categories.length; i++) {
        if (this.categories[i].code == code) {
          this.deleteCategoryId = this.categories[i].id;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  text-align: center;
  margin: auto;
}

.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-card-title {
  font-size: 16px;
  font-weight: 600;
}

.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}

.tableManagement.el-col {
  border: 22px solid transparent;
}
</style>
<style>
.el-notification {
  width: 700px;
}
</style>